<script>
import {getOpinionData, submitHandle} from "./opinionExamJs";
import {formatDate} from "../../../util/js/utils";

export default {
  name: "OpinionExam",
  data() {
    return {
      opinionCount: 0, // 未处理建议的数量
      allData: [], // 所有需要处理的数据
      templateData: { // 数据模板
        index: -1,
        ouuid: '',
        title: '',
        type: '',
        content: '',
        u_uuid: '',
        important: null,
        adopt: '',
        updateTime: '',
      },
      nowData: {}, // 当前正在处理的数据
      nextData: {}, // 下一个需要处理的数据

      isAdoptButton: null,
      isImportantButton: null,
      ifImportantVisible: false,
      ifAdoptVisible: true
    }
  },
  mounted() {
    this.getData(); //初始化数据
    this.adoptButton(this.nowData.adopt)
    this.importantButton(this.nowData.important)
  },
  methods: {
    formatDate,
    // 获取所需要处理的数据
    getData() {
      const _this = this;
      getOpinionData().then(res => {
        if (res.code === '200') {
          _this.allData = res.data.data; // 数据保存
          _this.opinionCount = res.data.totalNumber;
          _this.copyTemplateData(_this.nowData); //先将数据模板化
          _this.copyTemplateData(_this.nextData); //先将数据模板化
          if(_this.opinionCount > 0) {
            _this.nowData = _this.allData[0]; // 将第一个数据初始化给当前处理的数据
            _this.nowData.index = 0;
          }else{
            // 初始数据没有，直接隐藏
            _this.ifAdoptVisible = false;
          }
          if(_this.opinionCount > 1) {
            _this.nextData = _this.allData[1]; // 将第二个数据初始化给下一个需要处理的数据
            _this.nextData.index = 1;
          }
        } else {
          _this.$message.warning("出错了：" + res.msg)
        }
      }).catch(err => {
        _this.$router.push('/framework/error')
        console.log(err);
      })
    },
    // 复制模板数据到目标对象
    copyTemplateData(target) {
      Object.assign(target, this.templateData);
    },
    // 处理是否采纳带来的数据问题
    adoptButton(button) {
      const _this = this;
      if (_this.isAdoptButton !== button) {
        _this.isAdoptButton = button; // 否则激活点击的按钮
      }
      if (button === '2') {
        // 选择采纳
        _this.nowData.adopt = '2'
        _this.ifImportantVisible = true;
      } else {
        _this.nowData.adopt = '0';
        _this.nowData.important = null;
        _this.ifImportantVisible = false;
      }
    },
    importantButton(button) {
      const _this = this;
      if (_this.isImportantButton !== button) {
        _this.isImportantButton = button; // 激活点击的按钮
      }
      _this.nowData.important = button;
    },
    // 当点击确定的时候提交数据
    confirmSubmit() {
      const _this = this;
      if (_this.nowData.index - 1 === _this.allData.length) {
        _this.$message.warning("已无数据");
        return false;
      }
      // 数据校验
      if (_this.nowData.adopt === '1') {
        _this.$message.warning("请先处理当前意见！")
        return false;
      } else if (_this.nowData.adopt === '2' && _this.nowData.important === null) {
        _this.$message.warning("请先处理当前意见！")
        return false;
      }
      submitHandle(_this.nowData).then(res => {
        if (res.code === '200') {
          _this.opinionCount = _this.opinionCount-1;
          if (_this.opinionCount !== 0) {
            // 如果还有数据就继续获取
            _this.nowData = _this.nextData;
            _this.nextData = {index: _this.nextData.index+1,..._this.allData[_this.nextData.index + 1]};// 获取下一个数据
          } else {
            _this.copyTemplateData(_this.nowData); // 已经没有了数据,刷新模板
            _this.ifAdoptVisible = false;
          }
          // 处理数据
          _this.isAdoptButton= null;
          _this.isImportantButton= null;
          _this.ifImportantVisible = false;
        } else {
          _this.$message.error("出错了：" + res.msg);
        }
      }).catch(err => {
        _this.$router.push('/framework/error')
        console.log(err);
      })
    }
  }
}
</script>

<template>
  <div id="oe-main-container" class="oe-main-container">
    <div id="oe-assistant-container" class="oe-assistant-container">
      <div id="oe-opinion-count">
        <div>
          当前共有{<span style="margin:0 10px 0 10px;">{{ this.opinionCount }}</span>}个建议未处理，请及时处理！
        </div>
        <p style="font-size:12px;color:red;">
          注：当你确定之后无法再次修改此意见，唯有更高级别的权限才可修改！
        </p>
      </div>
      <div id="oe-one-container" class="oe-one-container">
        <div style="width: 700px;height:17.6px;">
          <span id="oe-userid-container" class="oe-userid-container">用户id：{{ this.nowData.uuuid }}</span>
        </div>

        <div id="oe-title-container" class="oe-title-container">
          <p>{{ this.nowData.title }}</p>
        </div>
        <div id="oe-content-container" class="oe-content-container">
          <span>{{ this.nowData.content }}</span>
          <div>
            <span style="float: left">类型：{{this.nowData.type}}</span>
            <span>创建时间：<b>{{ formatDate(this.nowData.updateTime) }}</b></span>
          </div>
        </div>
        <div id="oe-operate-container" class="oe-operate-container">
          <div id="oe-adopt-button" class="oe-operate-button">
            <div v-if="ifAdoptVisible">
              <el-button @click="adoptButton('2')" :class="{ active: isAdoptButton === '2' }"
                         style="width: 60px"
                         type="primary" size="mini" plain>采纳
              </el-button>
              <el-button @click="adoptButton('0')" :class="{ active: isAdoptButton === '0' }"
                         style="width: 70px" type="primary" size="mini" plain>不采纳
              </el-button>
            </div>
          </div>
          <div id="oe-important-button" class="oe-operate-button">
            <div v-if="ifImportantVisible">
              <el-button @click="importantButton('0')" :class="{ active: isImportantButton === '0' }"
                         style="width: 70px" type="primary" size="mini" plain>不重要
              </el-button>
              <el-button @click="importantButton('1')" :class="{ active: isImportantButton === '1' }"
                         style="width: 60px" type="primary" size="mini" plain>一般
              </el-button>
              <el-button @click="importantButton('2')" :class="{ active: isImportantButton === '2' }"
                         style="width: 60px" type="primary" size="mini" plain>重要
              </el-button>
              <el-button @click="importantButton('3')" :class="{ active: isImportantButton === '3' }"
                         style="width: 70px" type="primary" size="mini" plain>很重要
              </el-button>

            </div>
          </div>
          <div id="oe-next-button" class="oe-operate-button">
            <button v-if="ifAdoptVisible" @click="confirmSubmit">确定<img src="../../../../assets/img/rightArrow.svg"/>
            </button>
          </div>
        </div>
      </div>
      <div id="oe-two-container" class="oe-two-container">
        <span id="oe-userid-container" class="oe-userid-container">
          用户id：{{ this.nextData.uuuid }}
        </span>
        <div id="oe-title-container" class="oe-title-container">
          <p>{{ this.nextData.title }}</p>
        </div>
        <div id="oe-content-container" class="oe-content-container">
          <span>{{ this.nextData.content }}</span>
          <div>
            <span>创建时间：<b>{{ this.nextData.updateTime }}</b></span>
          </div>
        </div>
        <div id="oe-operate-container" class="oe-operate-container">
          <div id="oe-adopt-button" class="oe-operate-button">
            <div v-if="ifAdoptVisible">
              <el-button style="width: 60px" type="primary" size="mini" plain>采纳</el-button>
              <el-button style="width: 70px" type="primary" size="mini" plain>不采纳</el-button>
            </div>
          </div>
          <div id="oe-important-button" class="oe-operate-button">
          </div>
          <div id="oe-next-button" class="oe-operate-button">
            <button v-if="ifAdoptVisible">确定<img src="../../../../assets/img/rightArrow.svg"/></button>
          </div>
        </div>
      </div>
      <div id="oe-two-cover-container" class="oe-two-cover-container"></div>
    </div>
    <div v-if="!ifAdoptVisible" id="oe-dialog-container" class="oe-dialog-container">
      <el-empty description="暂无数据"></el-empty>
    </div>
  </div>
</template>

<style scoped>
@import "opinionExamCss.css";
</style>
